<template>
	<div class="mobile-dialog-footer">
		<svg-icon iconClass="voice-img" class="voice-img" @svgEvent="toast"></svg-icon>
		<div class="input-wrap">
			<input v-model="inputValue" class="client-input" placeholder="请输入想要咨询的问题" @keyup.enter="postMessage"/>
			<svg-icon v-show="!inputValue" icon-class="sender" class="sender-svg"></svg-icon>
			<svg-icon v-show="inputValue" icon-class="sender-active" class="sender-svg" @svgEvent="postMessage"></svg-icon>
		</div>
	</div>
</template>

<script>
import voiceImg from '@/assets/images/record.png'
import { Toast } from 'vant';
import { mapState, mapMutations, mapActions } from "vuex"
export default {
	name: 'MobileDialogFooter',
	data() {
		return {
			voiceImg,
			inputValue: ''
		}
	},
	computed: {
		...mapState('aia-mobile', ['mobileSessionInfo'])
	},
	methods: {
		...mapMutations('aia-mobile', ['pushMessageList']),
		...mapActions('aia-mobile', ['postMsgMobile']),
		toast() {
			Toast.fail('暂未实现');
		},
		postMessage() {
			let inputValue = this.inputValue
			this.inputValue = ''
			this.postMsgMobile({
				aicc_msg_type: "text",
				aicc_msg_content: {
					content: inputValue
				},
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.mobile-dialog-footer{
	padding: 0.32rem 0.3rem;
	width: 100%;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	.voice-img{
		margin: 0 .30rem 0 0.05rem;
    width: .72rem;
		height: 0.72rem;
	}
	.input-wrap{
		background: #FFFFFF;
		box-shadow: 0 0 0.12rem 0 rgba(155,187,255,0.34);
		border-radius: 0.4rem;
		flex: 1;
		display: flex;
		align-items: center;
		padding-right: 0.24rem;
		.client-input{
			flex: 1;
			border-radius: 0.4rem;
			height: .8rem;
			border: 0;
			outline: 0;
			font-size: .28rem;
			padding: 0 .28rem;
			&::placeholder {
				color:  #7D7D7D;  /* 修改placeholder颜色 */
			}
		}
		.sender-svg{
			width: 0.4rem;
			height: 0.4rem;
		}
	}
}
</style>